<template>
  <view
    id="easyinput"
    class="input_view"
  >
    <!-- 默认输入框 -->
    <view
      v-if="focusFlag === false"
      class="view_default"
    >
      <text class="text_default" @click="focusInput">输入评论...</text>
      <uni-icons class="icon_star" type="star" size="25px" @click="clickStar" />
    </view>
  
    <!-- 点开后的输入框 -->
    <view
      v-if="focusFlag === true" 
      class="view_input"
    >
      <textarea
        id="textarea"
        v-model="value"
        class="textarea"
        placeholder="请输入评论..."
        :always-embed="true"
        :focus="true"
        :adjust-position="true"
        :cursor-spacing="inputViewHeight"
        :maxlength="140"
        :fixed="true"
      />
      <view class="view_send_pluins">
        <text class="text_length">
          {{ value.length }} / 140    &nbsp;
        </text>
        <button
          :class="value.length === 0 ? 'button_send_disable' :'button_send'"
          size="mini"
          @click="clickSend()"
        >
          发送
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    needLogin: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      focusFlag: false,
      value: '',
      inputViewHeight: 40
    }
  },
  updated() {
    this.getHeight()
  },
  methods: {
    // 点击输入框
    focusInput() {
      // 不需要登录 或者已经登录
      if (!this.needLogin || this.$checkLogin()) {
        this.focusFlag = true
      }
    },
    cancelInput() {
      this.focusFlag = false
    },
    clickSend() {
      this.$emit('send', this.value)
    },
    // 点击收藏
    clickStar() {
      this.$emit('star')
    },
    clearValue() {
      this.value = ''
    },
    // 
    getHeight() {
      const query = uni.createSelectorQuery().in(this)
      query.select('#textarea').boundingClientRect(data => {
        if (data !== null) {
          this.inputViewHeight = data.height + 30
        }
      }).exec()
    }
  }
}
</script>

<style lang="scss" scoped>
	.input_view{
		width: 100%;
		min-height: 40px;
		margin-top: 40px; 
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #fff;
		.view_default{
			padding: 0 15px 0 15px;
			display: flex;
			.text_default{
				padding: 5px;
				border-radius: 15px;
				background: #eee;
				color: darkgray;
				width: 85%;
			}
			.icon_star{
				width: 15%;
				margin: auto;
				text-align: center;
			}
		}
		.view_input{
			padding: 15px;
			position: relative;
			.textarea{
				width: 100%;
				background-color: #eeeeee;
				height: 80px;
				font-size: 14px;
			}
			.view_send_pluins{
				height: 30px;
				display: flex;
				margin-top: 10px;
				.text_length{
					width: 80%;
					text-align: right;
					margin: auto;
					font-size: 12px;
					color: gray;
				}
				.button_send{
					color: white;
					background: dodgerblue;
				}
				.button_send_disable{
					color: white;
					background: lightskyblue;
				}
			}
		}
	}
</style>
